<!DOCTYPE html>
<html>
<head>
    <title>bPage使用实例</title>
    <meta charset="UTF-8">
	<link rel="stylesheet" href="b.page.bootstrap3.css" type="text/css">
</head>

<body>

<div>
	<!-- 定义表格框架 -->
	<table id="dataGridTableJson" class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th class="selectColumn" >选择</th>
				<th>登录名</th>
				<th>姓名</th>
				<th>性别</th>
				<th>出生年月</th>
				<th>电话</th>
				<th>电子邮箱</th>
				<th>状态</th>
				<th>更新时间</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>
<div id="page3"></div>
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="b.page.js" ></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#page3').bPage({
			    url : 'http://localhost:9080/nt/onlineexam/list.do',
			    //开启异步处理模式
				asyncLoad : true,
				//关闭服务端页面模式
			    serverSidePage : false,
				//数据自定义填充
			    render : function(data){
			    	var tb = $('#dataGridTableJson tbody');
			    	$(tb).empty();
			    	if(data && data.objectList && data.objectList.length > 0){
			    		$.each(data.objectList,function(i,row){
			    			var tr = $('<tr>');
			    			$(tr).append('<td></td>');
			    			$(tr).append('<td>'+row.login_name+'</td>');
			    			$(tr).append('<td>'+row.name+'</td>');
			    			$(tr).append('<td>'+row.sexName+'</td>');
			    			$(tr).append('<td>'+row.birthday+'</td>');
			    			$(tr).append('<td>'+row.phone1+'</td>');
			    			$(tr).append('<td>'+row.email+'</td>');
			    			$(tr).append('<td>'+row.statusName+'</td>');
			    			$(tr).append('<td>'+row.update_time+'</td>');
			    			$(tb).append(tr);
			    		});	    		
			    	}
			    }
			});
		});
	</script>
</body>
</html>